<script setup>
import {getList as getCollection} from "@/boot/collection.js";
import {getList} from "@/boot/rest.js";
import {onMounted, ref} from "vue";
import RestCard from "@/components/RestCard.vue";
const collections = ref([])
const rest = ref([])
onMounted(()=>{
  getCollection({userId:localStorage.getItem('userId')}).then(res=>{
    collections.value = res.data.data
  })
  getList({}).then(res=>{
    rest.value = res.data.data
  })
})
const findRest = (id) => {
  return rest.value.find(item => item.id === id)
}
</script>

<template>
<div class="w-full h-full">
  <div class="w-2/3 m-auto">
    <blockquote class="text-2xl font-bold">我的收藏</blockquote>
    <div class="w-full h-full grid grid-cols-3 gap-5">
      <div v-for="item in collections" class="mt-10">
        <RestCard :collection-id="item.id" :button="true" :name="findRest(item.restId).name" :picUrl="findRest(item.restId).picUrl" :foodType="findRest(item.restId).foodType" :location="findRest(item.restId).location" />
      </div>
    </div>
  </div>
</div>
</template>

<style scoped>

</style>